
<template>
    <div class="wrapper">
       <ul class="dw">
         <li class="dw-left">
            <span class="iconfont icon-xinxing"></span>
            <span>定位失败</span>
         </li>
         <li class="dw-right">
           <span class="iconfont icon-diqiu"></span>
           <span>必游榜单</span>
         </li>
       </ul>
       <div class="kbai"></div>
      <div class="hot">
           <div class="hot-top">
               <div class="hot-top-l">
                  <span>本周热门榜单</span>
               </div>
               <span class="hot-top-r">全部榜单></span>
           </div>
          <ul class="hot-jd">
            <li class="hot-jd-list" v-for="item in hotJd" :key="item.id">
              <img :src="item.imgUrl"/>
              <p class="hot-jd-desc">{{item.desc}}</p>
              <p class="hot-jd-pr"><span>￥{{item.price}}</span>起</p>
            </li>
          </ul>
      </div>
      <div class="kbai"></div>
      <div class="yLike">
          <p class="yLike-t"><span class="iconfont icon-xinxing"></span><span class="yLike-t2">猜你喜欢</span></p>
          <ul class="yLike-list">

             <router-link
               tag="li"
               class="yLike-list-li"
               v-for="item in yLike"
               :key="item.id"
               :to="'/Detail/'+item.id"
             >
                   <div class="yLike-box">
                     <img class="yLike-img1" :src="item.imgUrl"/>
                     <div class="yLike-desc">
                         <p class="t1">{{item.desc}}</p>
                         <p class="t2"><span>*****</span><span class="pl">{{item.num}}条评论</span></p>
                         <p class="t3"><i>￥</i><span>{{item.price}}</span>起</p>
                      </div>
                      <div class="yLike-city"><span>{{item.address}}</span></div>
                   </div>
                    <p class="yLike-box2">{{item.text}}</p>
             </router-link>
          </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "HomeOther",
        props : {
          hotJd:Array,
          yLike:Array
        },
        data () {
          return {
            // hotJd:[
            //   {id:"0001",desc:"故宫",price:20,imgUrl:require("../../assets/img/Z (2).jpg")},
            //   {id:"0002",desc:"八达岭长城",price:157.5,imgUrl:require("../../assets/img/Z (3).jpg")},
            //   {id:"0003",desc:"北宫国家森林公园",price:5,imgUrl:require("../../assets/img/Z (4).jpg")},
            //   {id:"0004",desc:"水立方",price:14,imgUrl:require("../../assets/img/Z (5).jpg")},
            //   {id:"0005",desc:"御和园",price:66,imgUrl:require("../../assets/img/Z (6).jpg")},
            //   {id:"0006",desc:"司马台长城",price:80,imgUrl:require("../../assets/img/Z (7).jpg")},
            //   {id:"0007",desc:"南山滑雪场",price:4.5,imgUrl:require("../../assets/img/Z (8).jpg")},
            //   {id:"0008",desc:"北京野生动物园",price:71,imgUrl:require("../../assets/img/Z (5).jpg")},
            //   {id:"0009",desc:"世界花卉大观园",price:47.3,imgUrl:require("../../assets/img/Z (9).jpg")},
            // ],
            // yLike:[
            //   {id:"001",imgUrl:require("../../assets/img/2Q== (2).jpg"),desc:"龙脉温泉",price:149,address:"昌平区",num:200,text:"中国温泉之乡给你帝王的享受"},
            //   {id:"002",imgUrl:require("../../assets/img/2Q== (3).jpg"),desc:"故宫",price:90,address:"东城区",num:654654,text:"世界五大宫之首，穿越与您近在咫尺"},
            //   {id:"003",imgUrl:require("../../assets/img/2Q== (4).jpg"),desc:"北京乐多港奇幻乐园",price:150,address:"昌平",num:857,text:"体验奇幻神奇而不可预知的星际之旅"},
            //   {id:"004",imgUrl:require("../../assets/img/2Q== (5).jpg"),desc:"远去的恐龙",price:100,address:"朝阳",num:6167,text:"中国温泉之乡给你帝王的享受"}
            // ]
          }
        }
    }
</script>
<style lang="stylus" scoped>
  .test{
    width: 100%;
    height:2rem;
  }
    .dw{
      margin-top :.05rem;
      height:.48rem;
      border-top:.01rem solid gainsboro;
      display :flex ;
      li{
        width:50%;
        text-align:center;
        line-height .48rem;
        font-size :.14rem;
      }
       .dw-left{
         box-sizing:border-box;
         border-right:.01rem solid gainsboro;
       }
    }
  .kbai{
    background-color :#f5f5f5;
    height:.1rem;
  }
  .yLike{
    .yLike-t{
        margin:.05rem 0 .05rem .05rem;
      .icon-xinxing{
        color:#FF6151;
      }
       .yLike-t2{
         font-size :.16rem;
       }
    }
  }
   .hot-top{
     height:.5rem;
     line-height :.5rem;
     .hot-top-l{
       float:left;
       display:inline-block;
       margin-left:.13rem;
       font-size :.16rem;
     }
     .hot-top-r{
       display:inline-block;
       float:right;
       margin-right:.13rem;
     }

   }
    .hot-jd{
      /*border:1px solid red;*/
      overflow-x:scroll;
      white-space nowrap
      .hot-jd-list:nth-of-type(1){
        margin-left:.1rem;
      }
      .hot-jd-list{
        margin-left:.05rem;
        width:1rem;
        text-align:center;
        display:inline-block;
        .hot-jd-desc{
          margin:.05rem 0;
          .pl{

          }
        }
        img{
          width:1rem;
        }
        .hot-jd-pr{
           margin-bottom .05rem;
          span{
            color:#ff8e17;
          }

        }
      }
    }

//  猜你喜欢部分
   .yLike{
      .yLike-list{
          .yLike-list-li{
            margin-left:.1rem;
            border-bottom :.01rem solid gainsboro;
            margin-top :.2rem;
            .yLike-box{
              display:flex;
              align-items:center;
              /*border:1px solid red;*/
              .yLike-img1{
                width:1rem;
              }
              .yLike-desc{
                flex-grow: 1;
                margin-left :.1rem;
                .t1{
                  font-size :.18rem;
                }
                .t2{
                  margin :.1rem 0;
                  .pl{
                     margin-left .15rem;
                  }
                }
                .t3{
                  i{color:#ff8e17;}
                  span{color:#ff8e17;font-size :.2rem;}
                }
              }
              .yLike-city{
                align-self:flex-end;
                margin:0 .1rem .1rem 0;
              }
            }
           .yLike-box2{
             height:.48rem;
             text-align:center;
             line-height .48rem;
             color:#ff5555;
             font-size :.14rem;
           }
        }
      }
   }
</style>
